<template>
  <view class="footer-bar">
	 
			<view class="footer-item" @click="toggleFavorite">
			  <uni-icons :type="isFavorite ? 'star-filled' : 'star'" size="24" :color="isFavorite ? '#ff6600' : '#999'"></uni-icons>
			  <text>收藏</text>
			</view>
			<view class="footer-item" @click="shareCourse">
			  <uni-icons type="redo" size="24" color="#999"></uni-icons>
			  <text>分享</text>
			</view>
			<view class="footer-item" >
			  <uni-icons type="shopping-cart" size="24" color="#999"></uni-icons>
			  <text v-if="course.price==0">免费观看</text>
			  <text v-else-if="buyCourse.includes(course.id)&&course.price>0">已购买</text>
			  <button type="primary" size="mini" v-else-if="!buyCourse.includes(course.id)&&course.price>0&&discount===1" @click="buyNow">请购买{{course.price}}￥</button>
			  <view v-else  @click="buyNow">
				  
						<button type="primary" size="mini" >立即购买</button>
						<text>打{{discount}}折后{{course.price*discount}}￥</text>
					
					
					
					
			  </view>
			</view>
		
  </view>
  
  
	<view>
  			<!-- 分享示例 -->
  			<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
  				<uni-popup-share></uni-popup-share>
  			</uni-popup>
	</view>
</template>

<script setup>
import {apiAddCourseCollection,apiDeleteCourseCollection} from "@/apis/course.js"
const props=defineProps({
		course:{},
		discount:1,	
		
	})

let member=uni.getStorageSync("member");
	
const collection=uni.getStorageSync("collection");	

const emits = defineEmits(['buyPopu']);	

const collectionVo=ref({
	courseId:props.course.id,
	memberId:member.id
})
	

let buyCourse=uni.getStorageSync('BuyCourses');
const isFavorite = ref(false);

const toggleFavorite=()=> {
	
	isFavorite.value = !isFavorite.value;
	console.log("=============收藏按钮点击了==================");
	console.log(collection);
	console.log("============propse===================");
	console.log(props.course.id);
	collectionVo.value.courseId=props.course.id;
	if (isFavorite.value) {
	  if(!collection){
		  console.log("=============collection为空================");
		  let collections=[props.course.id]
		  uni.setStorageSync("collection",collections);
		  
		  
	  }	else{
		  collection.push(props.course.id);
		  uni.setStorageSync("collection",collection); 
	  }
	 
	 //添加收藏
	  addCollection()
	  
	} else {
	  const index = collection.indexOf(props.course.id);
	  if (index > -1) {
	    collection.splice(index, 1);
	    uni.setStorageSync("collection",collection);
	  }
	  
	  //取消收藏
	  deleteCollection()
	}

  
  
}

const share=ref(null)

const isCollection=()=>{
	setTimeout(()=>{
		if(collection){
			
			if(collection.includes(props.course.id)){
				
				isFavorite.value=true;
				
			}
		}		
	},200)
	
	
	
}


const shareCourse=()=> {
  
  
  
 console.log("============分享============");
 share.value?.open();

}

const buyNow=()=> {
	console.log("===========立即购买=======");
	emits('buyPopu');
 
}




const addCollection=async ()=>{
	console.log("======添加收藏======");
	console.log(props.course.id);
	console.log(collectionVo);
	let res=await apiAddCourseCollection(collectionVo.value);
	if(res.code===200){
		uni.showToast({
			title:"收藏成功",
			icon:"success"
		})
		
	}
	

}

const deleteCollection=async ()=>{
	console.log("======取消收藏======");
	console.log(props.course.id);
	console.log(collectionVo);
	let res=await apiDeleteCourseCollection(collectionVo.value);
	if(res.code===200){
		uni.showToast({
			title:"收藏成功",
			icon:"success"
		})
		
	}
	
}

isCollection();

	
</script>

<style scoped>
.footer-bar {
  display: flex;
  justify-content: space-around;
  background-color: #f8f8f8;
  padding: 10px 0;
  position: fixed;
  bottom: 0;
  width: 100%;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}

.footer-item {
  text-align: center;
}

.footer-item uni-icons {
  margin-bottom: 5px;
}
</style>